$(function (){
    //获得页面导航的组件
    let pageNav = document.querySelector("#pageNav");
    /**
     * 根据起始位置生成li
     */
    let appendLi=function (beginIndex,endIndex,pageIndex){
        let numberLi="";
        for (let i=beginIndex;i<=endIndex;i++){
            let active=pageIndex==i?"active" : '';
            numberLi += `<li class="page-item ${active}"><a class="page-link" href="javascript:void(0);" onclick="pageChange(${i})">${i}</a></li>`;
        }

        return numberLi;
    }

    let pageNavCompenet = function (pageIndex, totalPage){
        let li = '';
        let preLi = `<li class="page-item">
              <a class="page-link" href="javascript:void(0);" onclick="pageChange(${pageIndex-1})" aria-label="Previous">
                <span aria-hidden="true"><< 上一页</span>
              </a>
            </li>`;
        preLi = pageIndex == 1 ?'':preLi;
        let numberLi='';
        if(totalPage <= 5){
            numberLi = appendLi(1,totalPage,pageIndex);
        } else{
            if (pageIndex+2>=totalPage){
                numberLi=appendLi(totalPage-4,totalPage,pageIndex);
            }else if (pageIndex-2<=0){
                numberLi=appendLi(1,5,pageIndex);
            } else{
                numberLi=appendLi(pageIndex-2,pageIndex+2,pageIndex);
            }
        }
        let nextLi= `<li class="page-item">
              <a class="page-link" href="javascript:void(0);" onclick="pageChange(${pageIndex+1})" aria-label="Next">
                <span aria-hidden="true">下一页 >></span>
              </a>
            </li>`;
        nextLi = pageIndex == totalPage ? '':nextLi;
        li = preLi + numberLi + nextLi;
        pageNav.innerHTML = li;
    }

    let pageChange=function (pageIndex){
        //1.获取地址栏中的数据
        let url=location.href;
        let index=url.search("=");
        let keyWord=url.substring(index+1);

        //2.发送请求
        fetch(`pageSearchByKeyWord.product?keyWord=${keyWord}&pageIndex=${pageIndex}`).then(response=>response.json()).then(data=>{
            //{flag:true,code:200200,message:"success",data:{tatal:30,pageIndex:1,pageTotal:8,data:[{...}] }}
            console.log(data);
            loadData(data.data.data);
            pageNavCompenet(data.data.pageIndex,data.data.pageTotal);
        });



    }

    //默认打开第一页的数据
    pageChange(1);


    let loadData=function (SearchData){
        console.log(SearchData);
        let productStr="";
        SearchData.forEach((r,index) =>{
            productStr += `
            <div class="mt-4 ml-0 col-xl-3 col-lg-4 col-md-6 col-sm-6 px-0">
                <div class="card">
                    <a href="product.html?pid=${r.id}" class="card-img">
                        <img src="${r.pimage}" class="card-img-top selected-img" alt="...">
                    </a>
                    <div class="card-body">
                        <a href="product.html?pid=${r.id}">
                            <h1 class="card-title">${r.name}</h1>
                        </a>
                        <h2 class="card-title text-danger">￥${r.price}</h2>
                        <p class="card-text">${r.desc}</p>
                    </div>
                </div>
            </div>` ;
        });
        let productDiv = document.querySelector("#productDiv");

        productDiv.innerHTML = productStr;
    }


    // search函数
    function jumpToSearch(){
        let SearchInput = document.querySelector("#SearchInput");
        let keyWord = SearchInput.value;
        //对keyWord进行格式校验
        if(keyWord.trim().length == 0){
            //keyWord为空 给出友好提示
            return "空空如也";
        }else {
            location.href="searchProducts.html?keyWord="+keyWord.trim();
        }
    }
})